<template>
	<view class="page">
		<view class="title">
			请输入验证码
		</view>
		<view class="desc">
			验证码已通过短信发送至 18888888888
		</view>
		<view class="align-center justify-between inputbox">

			<uv-input v-model="phone" placeholder="请输入验证码" type="number" border="none"></uv-input>
			<view @click="sendcode" class="align-center  ft16 ml15 code " :style="timer?'color:#B5DCFF':''">
				{{timer?timer+'秒后重发':"发送验证码"}}
			</view>
		</view>

		<uv-button :custom-style="customStyle" type="primary" :disabled="getPhone" text="登录"></uv-button>








	</view>
</template>

<script>
	import operate from '@/common/operate.js'
	export default {
		data() {
			return {
				phone: "",
				checkboxValue: [1],
				customStyle: {
					width: '686rpx',
					height: '96rpx',
					marginTop: '48rpx',
					borderRadius: "12rpx",
					background: '#228CFC',
				},
				timer: null
			}
		},
		onLoad() {
			// this.getSessionKey()  
		},
		mounted() {
			// this.$refs.popup.open()
		},
		computed: {
			getPhone() {
				return this.$utils.checkStr(this.phone, 'mobile')
			}
		},
		methods: {
			sendcode() {
				if (!this.timer) {
					this.timer = 60
					var timers = setInterval(() => {
						this.timer--
						if (this.timer == 0) {
							this.timer = null
							clearInterval(timers)
						}
					}, 1000)
				}
			},



		}
	}
</script>

<style lang="scss">
	.page {
		background-color: #ffffff !important;
		height: 100vh;
		padding-top: 24rpx;
		padding-left: 32rpx;
	}


	.title {
		color: rgba(0, 0, 0, 0.90);
		text-align: left;
		font-family: "PingFang SC";
		font-size: 40rpx;


		// font-weight: 600;
		margin: 0 auto 24rpx;
		line-height: 72rpx;
	}

	.desc {
		color: var(--text-icon-font-gy-340, rgba(0, 0, 0, 0.40));
		margin: 32rpx 0 48rpx;
		/* Body/Small */
		font-family: "PingFang SC";
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx;
		/* 166.667% */
	}

	.submit {
		width: 690rpx;
		height: 100rpx;
		border-radius: 999px;
		background: #228CFC;
		margin-top: 112rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 100rpx;
	}

	.inputbox {
		border-bottom: 1rpx solid #E7E7E7;
		height: 112rpx;
		padding-right: 32rpx;

		.code {
			color: #228CFC;
			position: relative;
		}

		.code::before {
			clear: both;
			content: '';
			position: absolute;
			left: -32rpx;
			top: 0;
			margin: auto;

			bottom: 0;
			width: 2rpx;
			height: 32rpx;

			background-color: #E7E7E7;
		}
	}
</style>